import React from "react";
import Select from "../../Select";
import { useErrmsgStyles } from "./styles";

export default function BooleanComponent({
  value,
  disabled,
  errmsg,
  onChange,
}: {
  value?: boolean;
  disabled?: boolean;
  errmsg?: string;
  onChange: (v: boolean) => void;
}) {
  const classes = useErrmsgStyles();
  let v;
  if (value === true) v = 1;
  if (value === false) v = 0;

  const handler = (v: number) => onChange(v == 1);

  return (
    <>
      <Select
        value={v}
        onChange={handler}
        disabled={disabled}
        invalid={!!errmsg}
        options={[
          { label: "是", value: 1 },
          { label: "否", value: 0 },
        ]}
      />
      {errmsg && <div className={classes.errmsg}>{errmsg}</div>}
    </>
  );
}
